CSS @scroll-timeline'ni o'zlashtirish: aylantirish jarayoni orqali animatsiyani boshqarish

Doimiy rivojlanib borayotgan veb-dasturlash olamida foydalanuvchilar uchun jozibali va interaktiv tajribalar yaratish juda muhim. CSS buning uchun turli xil vositalarni taklif etadi va eng kuchli, lekin ko'pincha e'tibordan chetda qoladiganlaridan biri bu @scroll-timeline at-rule'dir. Bu xususiyat dasturchilarga animatsiyalarni to'g'ridan-to'g'ri elementning aylantirish jarayoniga bog'lash imkonini beradi va bu orqali jozibador, aylantirishga asoslangan animatsiyalar yaratiladi. Ushbu maqolada @scroll-timeline'ning sintaksisi, xususiyatlari, amaliy qo'llanilishi va veb-dizayningizni yuksaltirish uchun ilg'or animatsiya texnikalari keng qamrovli tarzda o'rganiladi.

CSS @scroll-timeline nima?

@scroll-timeline — bu CSS at-rule bo'lib, u aylantirish vaqt jadvalini (scroll timeline) belgilaydi. Bu, asosan, belgilangan elementning aylantirish pozitsiyasiga mos keladigan holatlar ketma-ketligidir. An'anaviy vaqtga asoslangan animatsiyalarga tayanmasdan, @scroll-timeline animatsiya jarayonini foydalanuvchining aylantirish harakatiga bog'laydi. Natijada, animatsiya tezligi foydalanuvchining aylantirish xatti-harakatlari bilan to'g'ridan-to'g'ri boshqarilgani uchun yanada tabiiy va sezgir animatsiya hosil bo'ladi.

Bu quyidagi kabi hayajonli imkoniyatlarni ochadi:

• Vizual hikoya qilish: Foydalanuvchi aylantirgan sari kontentni bosqichma-bosqich ochib berish.
• Interaktiv ma'lumotlarni vizualizatsiya qilish: Foydalanuvchi ma'lumotlarni o'rganayotganda diagramma va grafiklarni animatsiya qilish.
• Parallaks effektlari: Aylantirish pozitsiyasiga qarab turli elementlarni har xil tezlikda animatsiya qilish orqali chuqurlik va hajm yaratish.
• Jarayon indikatorlari: Foydalanuvchining uzun hujjat bo'ylab harakatlanishini vizual tarzda aks ettirish.

Sintaksis va xususiyatlar

@scroll-timeline at-rule'ning asosiy sintaksisi quyidagicha:

            @scroll-timeline timeline-name {
  source: auto | <element-selector>;
  orientation: auto | block | inline;
  scroll-offsets: <scroll-offset>[ , <scroll-offset> ]*;
}

            

              
                Copy
              
            
          

Keling, har bir xususiyatni tahlil qilib chiqamiz:

timeline-name

Bu sizning aylantirish vaqt jadvalingiz uchun noyob identifikator. Siz bu nomni animatsiyaga qo'llashda vaqt jadvaliga murojaat qilish uchun ishlatasiz.

Misol:

            @scroll-timeline my-scroll-timeline {
  /* ... */
}

            

              
                Copy
              
            
          

source

Ushbu xususiyat qaysi elementning aylantirish pozitsiyasi animatsiyani boshqarishini belgilaydi. U ikki xil qiymatga ega bo'lishi mumkin:

• auto: Brauzer aylantiruvchi elementni avtomatik ravishda aniqlaydi. Bu ko'pincha hujjatning ko'rish oynasi (brauzer oynasi) bo'ladi.
• <element-selector>: Aylantirish manbasi sifatida ishlatiladigan ma'lum bir elementni aniqlaydigan CSS selektori. Bu sizga sahifangizdagi ma'lum konteynerlar yoki bo'limlarni nishonga olish imkonini beradi.

Misol (ko'rish oynasini manba sifatida ishlatish):

            @scroll-timeline my-scroll-timeline {
  source: auto; /* Ko'rish oynasidan foydalanadi */
  /* ... */
}

            

              
                Copy
              
            
          

Misol (ma'lum bir elementni manba sifatida ishlatish):

            @scroll-timeline my-scroll-timeline {
  source: #scrollable-container; /* ID'si "scrollable-container" bo'lgan elementdan foydalanadi */
  /* ... */
}

            

              
                Copy
              
            
          

orientation

Bu xususiyat vaqt jadvali uchun ishlatiladigan aylantirish yo'nalishini belgilaydi. U animatsiyaning vertikal yoki gorizontal aylantirish orqali boshqarilishini aniqlaydi. U uch xil qiymatga ega bo'lishi mumkin:

• auto: Brauzer manba elementining ustun bo'lgan aylantirish yo'nalishiga qarab aylantirish yo'nalishini avtomatik ravishda aniqlaydi.
• block: Blok (ko'p yozuv rejimlarida vertikal) aylantirish yo'nalishidan foydalanadi.
• inline: Satr (ko'p yozuv rejimlarida gorizontal) aylantirish yo'nalishidan foydalanadi.

Misol (vertikal aylantirishdan foydalanish):

            @scroll-timeline my-scroll-timeline {
  source: auto;
  orientation: block; /* Vertikal aylantirish */
  /* ... */
}

            

              
                Copy
              
            
          

Misol (gorizontal aylantirishdan foydalanish):

            @scroll-timeline my-scroll-timeline {
  source: #horizontal-scroll-container;
  orientation: inline; /* Gorizontal aylantirish */
  /* ... */
}

            

              
                Copy
              
            
          

scroll-offsets

Bu xususiyat animatsiyaning ma'lum nuqtalariga mos keladigan aylantirish pozitsiyalarini belgilaydi. Bu ixtiyoriy xususiyat bo'lib, agar ko'rsatilmasa, animatsiya aylantiriladigan maydonning boshidan oxirigacha ijro etiladi. Ishlatilganda, siz bir yoki bir nechta aylantirish siljishlarini belgilashingiz mumkin, ularning har biri aylantirish pozitsiyasini va animatsiya jarayonidagi mos nuqtani belgilaydi.

<scroll-offset> uchun sintaksis:

            <scroll-offset> = <length-percentage> [ at <length-percentage> ]

            

              
                Copy
              
            
          

Bu yerda:

• Birinchi <length-percentage> aylantiriladigan maydon ichidagi aylantirish pozitsiyasini bildiradi.
• Ixtiyoriy at <length-percentage> mos keladigan animatsiya jarayonini (0% dan 100% gacha) bildiradi. Agar tushirib qoldirilsa, animatsiya jarayoni belgilangan aylantirish siljishlari o'rtasida teng taqsimlanadi.

Misollar:

            /* 200px aylantirish pozitsiyasi animatsiya jarayonining 0%iga mos keladi */
scroll-offsets: 200px at 0%;

/* Aylantiriladigan maydonning 50%idagi aylantirish pozitsiyasi animatsiya jarayonining 50%iga mos keladi */
scroll-offsets: 50% at 50%;

/* Bir nechta siljishlar: */
scroll-offsets: 0px at 0%, 500px at 50%, 1000px at 100%;

/* "at" kalit so'zisiz - teng taqsimlangan animatsiya jarayoni: */
scroll-offsets: 0px, 500px, 1000px; /* 0px at 0%, 500px at 50%, 1000px at 100% ga teng */

            

              
                Copy
              
            
          

scroll-offsets uchun muhim mulohazalar:

• Agar siz scroll-offsets ni belgilasangiz, kutilmagan animatsiya xatti-harakatlarini oldini olish uchun ular aylantiriladigan maydonning diapazonini qoplashiga ishonch hosil qiling.
• Animatsiya jarayoni belgilangan aylantirish siljishlari o'rtasida interpolyatsiya qilinadi.
• Agar siz scroll-offsets ni belgilamasangiz, animatsiya jarayoni butun aylantiriladigan maydon bo'ylab teng taqsimlanadi.

Aylantirish vaqt jadvalini animatsiyaga qo'llash

Aylantirish vaqt jadvalini belgilaganingizdan so'ng, uni animation-timeline xususiyati yordamida CSS animatsiyasiga qo'llashingiz kerak.

Sintaksis oddiy:

            animation-timeline: timeline-name; /* @scroll-timeline'da belgilagan nomingizni ishlating */

            

              
                Copy
              
            
          

Shuningdek, siz @keyframes yordamida standart CSS animatsiyasini belgilashingiz kerak bo'ladi. Animatsiya foydalanuvchi aylantirganda yuz beradigan CSS xususiyatlaridagi o'zgarishlarni belgilaydi. Bundan tashqari, animation-range CSS xususiyatining o'rnatilganligiga ishonch hosil qilishingiz kerak. U animatsiyani faollashtiradigan aylantirish vaqt jadvalining diapazonini belgilaydi.

Mana to'liq misol:

            /* Aylantirish vaqt jadvalini belgilash */
@scroll-timeline my-scroll-timeline {
  source: auto;
  orientation: block;
}

/* Animatsiyani belgilash */
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animatsiya va aylantirish vaqt jadvalini elementga qo'llash */
.animated-element {
  animation: fade-in 1s forwards;
  animation-timeline: my-scroll-timeline;
  animation-range: entry 25% cover 75%; /* entry va cover - boshlanish va tugash diapazonlari uchun kalit so'z qiymatlari */
}

            

              
                Copy
              
            
          

Bu misolda:

• Ko'rish oynasini manba sifatida va vertikal aylantirishni yo'nalish sifatida ishlatadigan my-scroll-timeline nomli @scroll-timeline belgilanadi.
• fade-in nomli @keyframes oddiy paydo bo'lish va yuqoriga siljish animatsiyasini belgilaydi.
• .animated-element sinfiga fade-in animatsiyasi qo'llaniladi, lekin u taymer bilan emas, balki my-scroll-timeline tomonidan boshqariladi.
• animation-range animatsiya elementning yuqori cheti ko'rish oynasining pastki 25% qismiga kirganda boshlanishi va yuqori 25% qismidan chiqqanda tugashi kerakligini belgilaydi.

Amaliy misollar va qo'llash holatlari

Keling, jozibali veb-tajribalar yaratish uchun @scroll-timeline dan qanday foydalanish mumkinligiga oid ba'zi amaliy misollarni ko'rib chiqamiz.

1. Kontentni bosqichma-bosqich ochish

Bu foydalanuvchi sahifani pastga aylantirganda kontentni ochib beradigan keng tarqalgan qo'llash holatidir. Ko'rish doirasiga kirganda paydo bo'ladigan bo'limlarga ega uzun maqolani tasavvur qiling.

HTML:

            <section class="content-section">
  <h2>Section 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>

<section class="content-section">
  <h2>Section 2</h2>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
</section>

            

              
                Copy
              
            
          

CSS:

            @scroll-timeline reveal-timeline {
  source: auto;
  orientation: block;
}

@keyframes reveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-section {
  animation: reveal 1s forwards;
  animation-timeline: reveal-timeline;
  animation-range: entry 25% cover 75%;
}

            

              
                Copy
              
            
          

Bu misolda har bir .content-section ko'rish oynasiga aylantirilganda paydo bo'ladi. animation-range animatsiyaning bo'limning yuqori cheti ko'rish oynasining pastki 25% qismiga kirganda boshlanishini va bo'lim yuqori 25% qismidan chiqqanda tugashini ta'minlaydi.

2. Parallaks effektlari

Parallaks effektlari orqa fon elementlarini old fon elementlaridan farqli tezlikda harakatlantirib, chuqurlik hissini yaratadi. @scroll-timeline parallaks aylantirishni amalga oshirishni osonlashtiradi.

HTML:

            <div class="parallax-container">
  <div class="background-element"></div>
  <div class="foreground-element">
    <h2>Parallax Section</h2>
    <p>Some content here...</p>
  </div>
</div>

            

              
                Copy
              
            
          

CSS:

            .parallax-container {
  position: relative;
  height: 500px; /* Zaruratga qarab o'zgartiring */
  overflow: hidden;
}

.background-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('background.jpg'); /* O'zingizning rasmingiz bilan almashtiring */
  background-size: cover;
  transform: translateZ(-1px) scale(2); /* Parallaks effektini yaratadi */
  transform-origin: top;
  pointer-events: none; /* Old fon elementlariga bosish imkonini beradi */

  animation: parallax-bg 1s linear forwards;
  animation-timeline: parallax-timeline;
  animation-range: 0vh 100vh;
}

.foreground-element {
  position: relative;
  z-index: 1;
  padding: 50px;
  background-color: rgba(255, 255, 255, 0.8);
}

@scroll-timeline parallax-timeline {
  source: auto;
  orientation: block;
}

@keyframes parallax-bg {
    0% { transform: translateZ(-1px) scale(2) translateY(0px); }
    100% { transform: translateZ(-1px) scale(2) translateY(-50vh); }
}

            

              
                Copy
              
            
          

Bu misolda .background-element .foreground-element orqasida joylashgan va transform yordamida kattalashtirilgan. Keyin parallax-bg animatsiyasi qo'llaniladi, bu esa foydalanuvchi aylantirganda orqa fonning old fonga qaraganda sekinroq harakatlanishiga olib keladi va parallaks effektini yaratadi. animation-range animatsiyaning butun ko'rish oynasi balandligi (0vh dan 100vh gacha) davomida ishlashini ta'minlaydi.

3. Jarayon indikatorini animatsiya qilish

Siz @scroll-timeline dan foydalanib, foydalanuvchining hujjat bo'ylab aylantirish jarayonini vizual tarzda aks ettiruvchi jarayon indikatorini yaratishingiz mumkin.

HTML:

            <div class="progress-bar-container">
  <div class="progress-bar"></div>
</div>
<div class="content">
  <!-- Sizning kontentingiz bu yerda -->
</div>

            

              
                Copy
              
            
          

CSS:

            .progress-bar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #eee;
  z-index: 1000;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background-color: #007bff;
  animation: progress-bar-fill 1s linear forwards;
  animation-timeline: document-scroll-timeline;
}

@scroll-timeline document-scroll-timeline {
  source: auto;
  orientation: block;
}

@keyframes progress-bar-fill {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

            

              
                Copy
              
            
          

Bu misolda .progress-bar ning kengligi foydalanuvchi hujjatni aylantirgan sari 0% dan 100% gacha animatsiya qilinadi. @scroll-timeline `document-scroll-timeline` deb nomlangan, bu uning nima ekanligini aniq ko'rsatib turibdi.

Ilg'or texnikalar

Asoslarni o'zlashtirganingizdan so'ng, siz yanada murakkab aylantirishga asoslangan animatsiyalarni yaratish uchun ba'zi ilg'or texnikalarni o'rganishingiz mumkin.

1. Aniq boshqaruv uchun scroll-offsets dan foydalanish

scroll-offsets xususiyati sizga ma'lum bir aylantirish pozitsiyalarini ma'lum animatsiya jarayoni qiymatlariga bog'lash imkonini beradi. Bu aylantirish paytida ma'lum nuqtalarda ma'lum animatsiya holatlarini ishga tushirishni xohlaganingizda foydalidir.

            @scroll-timeline custom-timeline {
  source: #scrollable-container;
  orientation: block;
  scroll-offsets: 100px at 0%, 500px at 50%, 1000px at 100%;
}

@keyframes custom-animation {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 0;
  }
}

.animated-element {
  animation: custom-animation 1s forwards;
  animation-timeline: custom-timeline;
}

            

              
                Copy
              
            
          

Bu misolda animatsiya quyidagicha bo'ladi:

• Aylantirish pozitsiyasi 100px bo'lganda translateX(-100px) va opacity: 0 holatidan boshlanadi.
• Aylantirish pozitsiyasi 500px bo'lganda translateX(0) va opacity: 1 holatiga etadi.
• Aylantirish pozitsiyasi 1000px bo'lganda translateX(100px) va opacity: 0 holatida tugaydi.

2. JavaScript bilan birlashtirish

@scroll-timeline CSS orqali kuchli animatsiya boshqaruvini taklif qilsa-da, siz uni yanada moslashuvchanlik uchun JavaScript bilan birlashtirishingiz mumkin. Masalan, siz JavaScript'dan quyidagilar uchun foydalanishingiz mumkin:

• Ko'rish oynasi o'lchami yoki kontent o'zgarishlariga qarab scroll-offsets ni dinamik ravishda hisoblash va yangilash.
• Aylantirish jarayoniga qarab qo'shimcha JavaScript-ga asoslangan effektlar yoki o'zaro ta'sirlarni ishga tushirish.
• @scroll-timeline ni to'liq qo'llab-quvvatlamaydigan brauzerlar uchun muqobil yechimlarni amalga oshirish.

Mana, aylantirish jarayonini o'qish va CSS o'zgaruvchisini yangilash uchun JavaScript'dan foydalanishning oddiy misoli:

            const scrollableElement = document.getElementById('scrollable-container');
const animatedElement = document.querySelector('.animated-element');

scrollableElement.addEventListener('scroll', () => {
  const scrollPosition = scrollableElement.scrollTop;
  const maxScroll = scrollableElement.scrollHeight - scrollableElement.clientHeight;
  const scrollPercentage = (scrollPosition / maxScroll) * 100;

  animatedElement.style.setProperty('--scroll-progress', scrollPercentage + '%');
});

            

              
                Copy
              
            
          

Keyin siz ushbu CSS o'zgaruvchisini o'z animatsiyangizda ishlatishingiz mumkin:

            @keyframes custom-animation {
  0% {
    transform: translateX(calc(var(--scroll-progress) * -1px));
  }
  100% {
    transform: translateX(calc(var(--scroll-progress) * 1px));
  }
}

.animated-element {
  --scroll-progress: 0%; /* Boshlang'ich qiymat */
  animation: custom-animation 1s linear forwards;
  animation-timeline: scroll-driven-timeline;
}

            

              
                Copy
              
            
          

3. Turli xil yumshatish funksiyalaridan foydalanish

animation-timing-function to'g'ridan-to'g'ri aylantirish vaqt jadvalining o'ziga qo'llanilmasa-da (chunki vaqt jadvali vaqt bilan emas, balki aylantirish jarayoni bilan boshqariladi), siz hali ham animatsiyaning turli bosqichlarida tezligini va ritmini boshqarish uchun @keyframes ichida yumshatish funksiyalaridan foydalanishingiz mumkin. Kerakli effektga erishish uchun ease-in, ease-out, ease-in-out kabi turli xil yumshatish funksiyalari yoki hatto maxsus kubik Bezye egri chiziqlari bilan tajriba qilib ko'ring.

Brauzer mosligi va muqobil yechimlar

2023-yil oxiriga kelib, @scroll-timeline Chrome, Edge, Firefox va Safari kabi zamonaviy brauzerlarda nisbatan yaxshi qo'llab-quvvatlanadi. Biroq, uni ishlab chiqarishda qo'llashdan oldin Can I use... kabi veb-saytlarda joriy moslik holatini tekshirish muhimdir.

@scroll-timeline ni qo'llab-quvvatlamaydigan brauzerlar uchun siz an'anaviy JavaScript-ga asoslangan aylantirish hodisalarini tinglovchilar va GSAP (GreenSock Animation Platform) yoki Anime.js kabi animatsiya kutubxonalari yordamida muqobil yechim taqdim etishingiz mumkin. Shuningdek, @scroll-timeline ga asoslangan animatsiyalarni yoki JavaScript-ga asoslangan muqobil yechimlarni shartli ravishda qo'llash uchun CSS xususiyat so'rovlaridan (@supports) foydalanishingiz mumkin.

            @supports (animation-timeline: scroll()) {
  /* @scroll-timeline-ga asoslangan animatsiyalarni qo'llash */
  .animated-element {
    animation: fade-in 1s forwards;
    animation-timeline: my-scroll-timeline;
  }
} @else {
  /* JavaScript-ga asoslangan muqobil yechimni qo'llash */
  .animated-element {
    /* Dastlab yashirish */
    opacity: 0;
  }

  /* (Aylantirishni aniqlash va shaffoflikni qo'llash uchun JavaScript kodi) */
}

            

              
                Copy
              
            
          

Maxsus imkoniyatlarni hisobga olish

@scroll-timeline yoki har qanday animatsiya texnikasidan foydalanganda, maxsus imkoniyatlarni (accessibility) hisobga olish juda muhim. Animatsiyalaringiz quyidagilarga sabab bo'lmasligiga ishonch hosil qiling:

• Tutqanoqlar: Miltillovchi yoki tez o'zgaruvchan animatsiyalardan saqlaning.
• Chalg'itish: Foydalanuvchilarga animatsiyalarni to'xtatish yoki o'chirish imkoniyatini taqdim eting, ayniqsa ular uzoq davom etadigan yoki chalg'ituvchi bo'lsa.
• Kognitiv yuklama: Animatsiyalardan me'yorida foydalaning va ularning sof dekorativ bo'lishidan ko'ra, aniq bir maqsadga xizmat qilishiga ishonch hosil qiling.
• Harakat kasalligi: Parallaks effektlariga ehtiyot bo'ling, chunki ular ba'zi foydalanuvchilarda harakat kasalligini keltirib chiqarishi mumkin.

Animatsiyalar orqali taqdim etilgan ma'lumotlarga kirishning statik kontent yoki tavsiflovchi matn kabi muqobil usullarini taqdim etishni o'ylab ko'ring. Yordamchi texnologiyalarga semantik ma'no va kontekstni taqdim etish uchun ARIA atributlaridan foydalaning.

Eng yaxshi amaliyotlar

@scroll-timeline bilan ishlashda yodda tutish kerak bo'lgan ba'zi eng yaxshi amaliyotlar:

• Tavsiflovchi vaqt jadvali nomlaridan foydalaning: Ularning maqsadini aniq ko'rsatadigan vaqt jadvali nomlarini tanlang (masalan, parallax-background-timeline, reveal-section-timeline).
• Animatsiyalarni samarali saqlang: Ishlashdagi muammolarni oldini olish uchun animatsiyalaringizni optimallashtiring. Iloji boricha apparat tezlashtirilgan CSS xususiyatlari, masalan, transform va opacity dan foydalaning.
• Puxta sinovdan o'tkazing: Animatsiyalaringiz kutilganidek ishlashiga va hech qanday maxsus imkoniyatlar yoki ishlash muammolariga olib kelmasligiga ishonch hosil qilish uchun ularni turli qurilmalar va brauzerlarda sinab ko'ring.
• Oddiydan boshlang: Oddiy animatsiyalardan boshlang va tajriba orttirganingiz sari murakkablikni asta-sekin qo'shing.
• Foydalanuvchi tajribasini hisobga oling: Animatsiyalaringiz foydalanuvchi tajribasini yomonlashtirmasdan, aksincha, yaxshilashiga ishonch hosil qiling. Haddan tashqari murakkab yoki chalg'ituvchi animatsiyalardan saqlaning.
• animation-range CSS xususiyatidan foydalaning: Silliq va kutilgan tajriba uchun animatsiyalar faqat element ko'rish oynasida bo'lganda ishga tushishiga ishonch hosil qiling.

Xulosa

@scroll-timeline — bu dasturchilarga jozibali va interaktiv aylantirishga asoslangan animatsiyalar yaratish imkonini beradigan kuchli CSS xususiyatidir. Animatsiyalarni foydalanuvchining aylantirish xatti-harakatiga bog'lash orqali siz yanada tabiiy va sezgir veb-tajribalar yaratishingiz mumkin. Uning sintaksisi, xususiyatlari va ilg'or texnikalarini tushunib, siz @scroll-timeline dan veb-dizayningizni yuksaltirish va jozibador foydalanuvchi sayohatlarini yaratish uchun foydalanishingiz mumkin. @scroll-timeline ni amalga oshirayotganda brauzer mosligi, maxsus imkoniyatlar va ishlash samaradorligini hisobga olishni unutmang va har doim foydalanuvchi tajribasini birinchi o'ringa qo'ying.